<template>
  <div>
    <!--  分隔-->
    <el-row>
      <el-col :span="24"><div class="grid-content ">
        <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>发票查询</div>
      </div></el-col>
    </el-row>
    <!--  查询条件-->
    <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
      <el-form-item label="发票号">
        <el-input v-model="queryForm.invoiceId" placeholder="发票号" clearable></el-input>
      </el-form-item>
      <el-form-item label="委托客户">
        <el-input v-model="queryForm.client" placeholder="委托客户" clearable suffix-icon="el-icon-search"
                  @click.native="showClients()" readonly></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="getList" plain>查询</el-button>
        <el-button type="info" @click="add()" plain>新增发票</el-button>
      </el-form-item>
    </el-form>
    <!--  分隔-->
    <el-row>
      <el-col :span="24"><div class="grid-content ">
        <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
      </div></el-col>
    </el-row>
    <div id="s" class="animate__animated animate__zoomIn animate__delay-0.5s" style="margin-top: 20px">
    <!--  数据表格-->
    <el-table :data="tableData" style="width: 100%;" :border="true"
              :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="invoiceId"
        label="发票号"
        align="center"
        width="220">
      </el-table-column>
      <el-table-column
        prop="client"
        label="委托客户"
        align="center"
        show-overflow-tooltip
        width="250">
      </el-table-column>
      <el-table-column
        prop="total"
        align="center"
        width="180"
        label="含税总额(元)">
      </el-table-column>
      <el-table-column
        prop="tax"
        label="税率%"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="invoiceHeader"
        label="发票抬头"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        prop="taxId"
        label="税号"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        prop="bankName"
        label="开户行"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bankAccount"
        label="银行账号"
        align="center"
        width="220">
      </el-table-column>
      <el-table-column
        prop="createUser"
        align="center"
        label="新增人员">
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="新增时间">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100">
        <template v-slot="scope" >
          <el-button @click="edit(scope.row)" type="text" size="small"  >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!--  分割行  -->
      <el-row>
        <el-col :span="24"><div class="grid-content ">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    <!--  分页-->
    <el-pagination
      @size-change="getList"
      @current-change="getList"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      <!--  分割行  -->
      <el-row>
        <el-col :span="24"><div class="grid-content ">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    </div>
    <!--  客户查询-->
    <el-dialog
      title="客户"
      :visible.sync="showClient"
      width="50%">
      <div slot="footer" class="dialog-footer">
        <!--  查询条件-->
        <el-form :inline="true" :model="queryClient" style="text-align: left">
          <el-form-item label="客户编号">
            <el-input v-model="queryClient.customerId" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="queryClient.customerName" placeholder="" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getClient">查询</el-button>
          </el-form-item>
        </el-form>
        <!--  数据表格-->
        <el-table :data="clients" style="width: 100%" :border="true" highlight-current-row
                  @current-change="handleCurrentChange" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="customerId"
            label="客户编号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户公司全称">
          </el-table-column>
        </el-table>
        <!--  分页-->
        <div style="width: 65%;">
          <el-pagination
            @size-change="getClient"
            @current-change="getClient"
            :current-page.sync="queryClient.pageNum"
            :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
            :page-size.sync="queryClient.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="clientTotal">
          </el-pagination>
        </div>
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FinInvoice",
  data() {
    return {
      //查询对象
      queryForm: {
        statementId: '',
        client: '',
        pageNum: 1,
        pageSize: 10
      },
      queryClient: {},
      //表格数组
      tableData: [],
      clients: [],
      //共多少条
      total: 0,
      clientTotal: 0,
      selectClient: {},
      showClient: false
    }
  },
  methods: {
    //查询发票列表请求
    getList() {
      this.$axios({
        url: 'finance/invoice/getList',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //跳转到新增界面
    add() {
      this.$router.push("AddInvoice")
    },
    //跳转到查看界面
    edit(row) {
      this.$router.push({
        name: 'ShowInvoice',
        params: row
      })
  },
    //显示查询客户窗口
  showClients() {
    this.showClient = true;
    this.getClient();
  },
    //查询客户窗口
  getClient() {
    this.$axios({
      url: 'base/customer/getList',
      method: 'post',
      data: this.queryClient
    }).then(res => {
      if (res.data.success) {
        this.clients = res.data.object.list;
        this.clientTotal = res.data.object.total;
      }
    }).catch(err => {
      this.$message.error(err.message);
    })

  },
  //取到选定的客户
  handleCurrentChange(val) {
    this.selectClient = val;
  },
  //选定的客户赋给查询条件
  confirm() {
    if (this.selectClient != null) {
      this.queryForm.client = this.selectClient.customerName;
    }
    this.showClient = false;
  },
  //清空查询条件，关闭对话框
  cancle() {
    this.queryForm.client = '';
    this.showClient = false;
  }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 15px;
}
/deep/ .el-table .el-table__body td .cell:empty::after,
.el-table .el-table__body td .cell > span:empty::after,
.el-table .el-table__body td .cell .approval:empty::after,
.el-table .el-table__body td .cell div:empty::after,
.el-table .el-table__body td .cell .line-limit-length:empty::after {
  content: "--";
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
<style>
.el-table .warning-row {
  background: oldlace !important;
}
.el-table__body tr.current-row > td {
  background-color: rgba(65, 225, 105, 0.45) !important;
}
</style>
